<template>
	<view class="filter-form" :style="{height: `calc(100vh - ${topHeight});`}">
		<navBar title="筛选"  @goBack="uni.navigateBack()"></navBar>
		
		<view class="placeholder" :style="{marginTop: `${extraHeight}`}"></view>
		
		<view class="title">施工日期</view>
		<view class="date-content">
			<view @click="openCalendar('stateDate')" class="select-date">
				<text :class="[!searchForm.stateDate ? 'gray-label' : '']">{{ searchForm.stateDate ? searchForm.stateDate : '请选择日期' }}</text>
				<image src="../../../../subpackage-overhaul/static/icon-style-4.png"></image>
			</view>
			<view class="segmentation">-</view>
			<view @click="openCalendar('endDate')" class="select-date">
				<text :class="[!searchForm.endDate ? 'gray-label' : '']">{{ searchForm.endDate ? searchForm.endDate : '请选择日期' }}</text>
				<image src="../../../../subpackage-overhaul/static/icon-style-4.png"></image>
			</view>
		</view>
		
		<view class="inline-form">
			<view class="inline-label">区间/站点</view>
			<view class="value-content">
				<view :class="[!searchForm.lineSiteSectionName ? 'gray' : '']">{{ searchForm.lineSiteSectionName ? searchForm.lineSiteSectionName : '请选择区间站点' }}</view>
				<image @click="clearLineSiteSection" v-show="searchForm.lineSiteSectionName" src="../../../../subpackage-overhaul/static/icon-style-8.png"></image>
				<u-icon @click="goSelectIntervalOrSite" name="arrow-right" color="#a7aebd" size="20"></u-icon>
			</view>
		</view>
		
		<view class="title">施工工法</view>
		<view class="label-list">
			<view @click="changeConstruction(item)" v-for="(item, index) in constructionList" :key="index" :class="[item.code === searchForm.construction ? 'active' : '']" class="label-item">{{ item.name }}</view>
		</view>
		
		<view class="btn-content">
			<view @click="reset" class="reset">重置</view>
			<view @click="confirm" class="confirm">确定</view>
		</view>
		
		<template v-if="currentDateValueTime || calendarVisible">
			<u-datetime-picker v-model="currentDateValueTime"  @cancel="calendarVisible = false" @confirm="confirmCalendar" :show="calendarVisible" mode="date" :maxDate="dateModel.end"></u-datetime-picker>
		</template>
	</view>
</template>

<script>
	import { getSystemHeightInfo } from '@/utils/common.js'
	import { handleFormatDate } from "@/utils/date.js"
	
	export default {
		data() {
			return {
				// 日期弹框是否可见
				calendarVisible: false,
				// 筛选表单
				searchForm: {
					stateDate: null,
					endDate: null,
					lineId: null,
					lineSiteSectionId: null,
					lineSiteSectionType: null,
					construction: null,
				},
				// 当前日期的值
				currentDateValueTime: null,
				// 日期数据
				dateModel: {
					end: 0,
					monthNum: 60
				},
				// 当前操作的key
				currentKey: '',
				// 施工工法列表
				constructionList: [],
				// 尺寸信息
				systemHeightInfo: {}
			}
		},
		computed: {
			// 顶部高度
			topHeight() {
				const { stateHeight, navbarHeight } = this.systemHeightInfo
				return `${(stateHeight + navbarHeight) || 0}px`
			},
			// 额外高度
			extraHeight() {
				const { stateHeight, bottomHeight, navbarHeight } = this.systemHeightInfo
				return `${(stateHeight + bottomHeight + navbarHeight) || 0}px`
			}
		},
		onLoad(options) {
			this.systemHeightInfo = getSystemHeightInfo()
			const year = new Date().getFullYear()
			this.dateModel.end = new Date(`${year + 2}-01-01`).getTime()
			if (this.$store.getters.dictMap && this.$store.getters.dictMap.construction_method) {
				this.constructionList = this.$store.getters.dictMap.construction_method
			}
			this.id = options.id
			// 监听选择的区间站点
			this.$$off(this.$config.ENV_SELECT_SITE)
			this.$$on(this.$config.ENV_SELECT_SITE, data => {
				this.searchForm = {
					...this.searchForm,
					lineId: data[0].id,
					lineName: data[0].name,
					lineSiteSectionId: data[2].id,
					lineSiteSectionName: data[2].name,
					lineSiteSectionType: data[1].id,
				}
			});
		},
		onShow() {
			// 判断是否有筛选内容
			if (uni.getStorageSync("_temp_params")) {
				this.searchForm = uni.getStorageSync("_temp_params")
				uni.removeStorageSync("_temp_params")
			}
		},
		methods: {
			/** 打开日期弹框 */
			openCalendar(key) {
				this.currentKey = key
				this.currentDateValueTime = this.searchForm[key] ? new Date(this.searchForm[key]).getTime() : new Date().getTime()
				console.log(this.searchForm[key], 'aaa');
				this.calendarVisible = true
			},
			
			/** 选择区间站点 */
			goSelectIntervalOrSite() {
				uni.navigateTo({ url: `/subpackage-overhaul/pages/comprehensiveOverhaul/progressFilling/components/selectSectionAndSite?pmId=${this.id}&projectType=zhdx` });
			},
			
			/** 改变施工工法 */
			changeConstruction(item) {
				this.searchForm.construction = item.code
			},
			
			/** 清空线路站点 */
			clearLineSiteSection(item) {
				this.searchForm = {
					...this.searchForm,
					lineId: undefined,
					lineName: undefined,
					lineSiteSectionId: undefined,
					lineSiteSectionName: undefined,
					lineSiteSectionType: undefined,
				}
			},
			
			/** 重置 */
			reset() {
				this.searchForm = {
					stateDate: null,
					endDate: null,
					lineId: null,
					lineSiteSectionId: null,
					lineSiteSectionType: null,
					construction: null
				}
			},
			
			/** 确认 */
			confirm() {
				uni.setStorageSync("_temp_params", this.searchForm)
				uni.navigateBack()
			},
			
			/** 确认日期筛选 */
			confirmCalendar(event) {
				const { value } = event
				this.searchForm[this.currentKey] = value ? handleFormatDate(new Date(value)) : undefined
				this.calendarVisible = false
				this.currentDateValueTime = undefined
			}
		}
	}
</script>

<style scoped lang="scss">
	.filter-form {
		background: #fff;
		min-height: 100vh;
		padding: 0 16px;
		.placeholder {
			height: 15px;
			background: #f5f7fa;
			width: 100vw;
			margin-left: -16px;
		}
		.title {
			font-size: 16px;
			color: #445469;
			font-weight: bold;
			line-height: 50px;
		}
		.date-content {
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			.segmentation {
				color: #000;
				font-size: 14px;
				font-weight: bold;
				margin: 0 8px;
				flex-shrink: 0;
			}
			.select-date {
				flex: 1;
				height: 40px;
				background: #f5f7fa;
				border-radius: 4px;
				padding: 10px 12px 10px 11px;
				box-sizing: border-box;
				color: #425166;
				font-weight: bold;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.gray-label {
					color: #cacaca;
					font-weight: 500;
				}
				image {
					width: 16px;
					height: 16px;
				}
			}
		}
		.inline-form {
			font-size: 16px;
			font-weight: bold;
			line-height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 1px solid #e2e5ed;
			border-bottom: 1px solid #e2e5ed;
			.inline-label {
				color: #445469;
			}
			.value-content {
				display: flex;
				align-items: center;
				> view {
					color: #22204e;
					max-width: 190px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				image {
					width: 26px;
					height: 26px;
					margin: 0 11px;
				}
				.gray {
					color: #cacdd8;
					font-weight: 500;
				}
			}
		}
		.label-list {
			display: flex;
			flex-wrap: wrap;
			.label-item {
				line-height: 29px;
				height: 29px;
				background: #f5f7fa;
				padding: 0 15px;
				border-radius: 2px;
				box-sizing: border-box;
				color: #566375;
				font-weight: bold;
				font-size: 12px;
				border: 1px solid transparent;
				margin: 0 11px 13px 0;
				box-sizing: border-box;
				&.active {
					color: #2f80ed;
					border-color: #2f80ed;
				}
			}
		}
		.btn-content {
			display: flex;
			align-items: center;
			font-size: 16px;
			font-weight: bold;
			line-height: 46px;
			position: fixed;
			bottom: 0;
			width: 100%;
			left: 0;
			text-align: center;
			.reset {
				background: #ebebeb;
				color: #445469;
				flex: 1;
			}
			.confirm {
				background: #2f80ed;
				color: #fff;
				flex: 1;
			}
		}
	}
</style>
